<template>
    <div>
        <div class="wraaper">
            <div class="title">我的全部购物车</div>
            <div class="products"
            v-for="item in productList" :key="item._id">
                <div class="products_title">{{shopName}}</div>
                <div class="products_wrapper">
                    <div class="products_list">
                        <div class="products_item">
                            <img class="products_item_img" :src="item.imgUrl" alt="">
                            <div class="products_item_detail">
                                <h4 class="products_item_title">{{item.name}}</h4>
                                <p class="products_item_price">
                                    <span>
                                        <span class="products_item_yen">&yen;</span> {{item.price}} x {{item.count}}
                                    </span>
                                    <span class="products_item_total">
                                        <span class="products_item_yen">&yen;</span> {{item.price * item.count}}
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="products_item">
                            <img class="products_item_img" :src="item.imgUrl" alt="">
                            <div class="products_item_detail">
                                <h4 class="products_item_title">{{item.name}}</h4>
                                <p class="products_item_price">
                                    <span>
                                        <span class="products_item_yen">&yen;</span> {{item.price}} x {{item.count}}
                                    </span>
                                    <span class="products_item_total">
                                        <span class="products_item_yen">&yen;</span> {{item.price * item.count}}
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Docker :currentIndex='1'/>
    </div>
    
</template>


<script>
import Docker from '../../components/Docker.vue'
import {uesCommonCartEffect} from '../../effects/cartEffects'
import {useRoute} from 'vue-router'
export default {
    name:'CartList',
    components:{ Docker },
    setup() {
        const route = useRoute()
        const shopId=1
        const {productList,shopName} = uesCommonCartEffect(shopId)
        console.log(shopId,'shopId')
        console.log(productList,'productList');
        console.log(shopName,'shopName');
        return { productList,shopName}
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables';
@import '../../style/mixins';
.wraaper{
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: .5rem;
  right: 0;
  background: rgb(248, 248, 248);
}
.title{
    font-size: .16rem;
    color: #333333;
    text-align: center;
    padding: .1rem;
}
.products{
    margin: .16rem .18rem .1rem .18rem;
    border-radius: .04rem;
    background: $bgColor;
    &_title{
        padding: .16rem;
        font-size: .16rem;
        color: $content-fontcolor;
    }
    &_wrapper{
        overflow-y: scroll;
        position: absolute;
        left: 0;
        right: 0;
        top: 1rem;
        bottom: .6rem;
        margin: 0 .18rem ;
    }
    &_list{
        background: $bgColor;
    }
    &_item{
        position: relative;
        display: flex;
        padding: 0 .16rem .16rem .16rem;
        &_img{
            width: .46rem;
            height: .46rem;
            margin-right: .16rem;
        }
        &_detail{
            flex: 1;
        }
        &_title{
            margin: 0;
            line-height: .2rem;
            font-size: .14rem;
            color: $content-fontcolor;
            @include ellipsis;
        }
        &_price{
            display: flex;
            margin: .06rem 0 0 0;
            font-size: .14rem;
            color: $hightlight-fontColor;
            line-height: .2rem;
        }
        &_total{
            flex: 1;
            color: $dark-fontColor;
            text-align: right;
        }
        &_yen{
            font-size: .12rem;
        }
    }
}
</style>